<ng-container *ngIf="httpService.devType">


  <nz-carousel *ngIf="banner.length" [nzAutoPlaySpeed]="3000" [nzAutoPlay]="true" [nzDots]="banner.length>1"
               [nzEffect]="effect">
    <div *ngFor="let index of banner" nz-carousel-content
         style="cursor: pointer;"
    >
      <div *ngIf="index.courseId" [routerLink]="'../vd/'+index.courseId">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;">
      </div>
      <a *ngIf="!index.courseId && index.link" [href]="index.link" style="display: block;">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;">
      </a>
      <div *ngIf="!index.courseId && !index.link">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;">
      </div>
    </div>
  </nz-carousel>
  <!--  导航列表-->
  <!--todo  后台修改 返回数据-->
  <div class="vd-wrapper" style="background: #f2f2f2">
    <div class="vd-classify-wrapper">
      <h1>系列课程</h1>
      <div
        #vdwrapper
        class="vd-classify"
      >
        <span
          (click)="getCourseByName(item.name)"
          *ngFor="let item of classifySplit();"
          [attr.title]="item.name"
          [ngClass]="{'checked': selectedCourseName === item.name}">{{item.name}}</span>
        <span (click)="classifySlice=!classifySlice" *ngIf="developmentlist.length > rowCount*2" class="load-more"><a>{{classifySlice ? '查看更多' : '收起'}}</a></span>
      </div>
    </div>


    <div class="vd-box" style="padding-top: 1vw !important;background: #f2f2f2;padding-bottom: 80px!important;">
      <!--<div class="vd-box-header">-->
        <!--<div *ngIf="courseList?.data.length > courseList?.size" class="vd-pagination">-->
          <!--<nz-pagination (nzPageIndexChange)="listFilter()" [(nzPageIndex)]="courseList.current"-->
                         <!--[nzPageSize]="courseList.size" [nzTotal]="courseList.data.length" nzSimple></nz-pagination>-->
        <!--</div>-->
      <!--</div>-->


      <nz-list [nzDataSource]="courseList?.currentData" [nzGrid]="{ gutter: 16, sm: 12, md: 8, lg: 6 }"
               [nzRenderItem]="item">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>

      <!--<div class="li-loading-more">-->

        <!--<button nz-button nzSize="large" nzType="primary">暂无更多</button>-->
      <!--</div>-->

    </div>


    <!--广告位-->
    <!--广告位-->
    <!--广告位-->

    <a style="background: none;text-align: center" *ngIf="developBan.length>0" [href]="developBan[0]?.link" target="_blank">
      <img alt="" class="li-ad-img shadow-box" [src]="developBan[0]?.imageUrl">
    </a>

  </div>
</ng-container>


<!--手机-->
<!--手机-->
<!--手机-->
<!--手机-->
<!--手机-->
<!--手机-->
<!--手机-->
<ng-container *ngIf="!httpService.devType">

  <nz-carousel *ngIf="banner.length" [nzAutoPlaySpeed]="3000" [nzAutoPlay]="true" [nzDots]="false"
               [nzEffect]="effect" (nzBeforeChange)="changeDev($event)">
    <div *ngFor="let index of banner" nz-carousel-content
         style="cursor: pointer;"
    >
      <div *ngIf="index.courseId" [routerLink]="'../vd/'+index.courseId">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;height: 175px;">
      </div>
      <a *ngIf="!index.courseId && index.link" [href]="index.link" style="display: block;">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;height: 175px;">
      </a>
      <div *ngIf="!index.courseId && !index.link">
        <img [src]="index.imageUrl" style="display: block;width: 100vw;height: 175px;">
      </div>
    </div>
  </nz-carousel>
  <div *ngIf="banner.length>1" class="dots_box" style="margin-top: -20px;position: absolute;z-index: 100;width: 100%;text-align: center">
    <p *ngFor="let item of banner; let i = index" [class]="dotD==i?'activeP':''"></p>
  </div>
  <!--<div style="padding-top: 40px;padding-left: 17px;color: #222;text-align: left">-->
    <!--<h1 style="font-size: 23px;">系列课程</h1>-->
  <!--</div>-->
  <div class="mb-classify-wrapper">
    <ul class="mb-classify vd-classify">
      <li (click)="getCourseByName(item.name)" *ngFor="let item of classifySplit();"
          [ngClass]="{'checked': selectedCourseName === item.name}"><a>{{item.name}}</a></li>
      <!--<li *ngIf="developmentlist.length > 0" (click)="open()"><a>查看更多</a></li>-->
      <li (click)="open()" *ngIf="developmentlist.length > 12"><a>查看更多</a></li>
    </ul>
    <!-- <div class="vd-moreClassify" *ngIf="developmentlist.length > 18">
      <a (click)="open()">更多<i nz-icon nzType="down-square" nzTheme="outline"></i></a>
    </div> -->
  </div>

  <div class="mb-box-wrapper" style="padding-top: 0">
    <div class="mb-box-body" style="padding: 0 10px">
      <nz-list [nzDataSource]="courseList?.currentData" [nzGrid]="{ gutter: 10, xs: 12 }" [nzRenderItem]="item">
        <ng-template #item let-item>
          <nz-list-item [nzContent]="nzContent">
            <ng-template #nzContent>
              <app-vditem [data]="item" [devType]="httpService.devType"></app-vditem>
            </ng-template>
          </nz-list-item>
        </ng-template>
      </nz-list>
      <div style="text-align: center" *ngIf="courseList?.data.length>12 && courseList?.currentData.length<=12">
        <button nz-button (click)="mbPagination()" nzType="default"
                *ngIf="courseList?.currentData.length < courseList.data.length" style="margin: 30px 0;background: #D10000;color: #fff;">加载更多
        </button>
      </div>
      <!--广告-->
      <div *ngIf="developBan[0]?.link===null || developBan[0]?.link==='null'">
        <img *ngIf="developBan.length>0" style="width: 100%;height: 70px;margin: 30px 0" [src]="developBan[0]?.imageUrl" alt="图片">
      </div>
      <a *ngIf="developBan[0]?.link!==null || developBan[0]?.link==='null'" [href]="developBan[0]?.link" target="_blank" style="overflow-x: scroll;display: block">
        <img *ngIf="developBan.length>0" style="width: 100%;height: 70px;margin: 30px 0" [src]="developBan[0]?.imageUrl" alt="图片">
      </a>
      <!--<button nz-button (click)="mbPagination()" style="margin: 30px 0;background: #D10000;color: #fff;" *ngIf="courseList?.currentData.length < courseList.data.length">加载更多</button>-->
      <!--<div style="height: 40px"></div>-->
    </div>
  </div>
  <div *ngIf="visible" class="mb-fxied">
    <h1>课程分类<i (click)="close()" nz-icon nzTheme="outline" nzType="close" style="float: right;"></i></h1>
    <ul class="mb-classify vd-classify" style="max-height: initial;">
      <li (click)="getCourseByName(item.name)" *ngFor="let item of developmentlist;"
          [ngClass]="{'checked': selectedCourseName === item.name}"><a>{{item.name}}</a></li>
    </ul>
  </div>
</ng-container>
